<template>
    <div  class = 'nohover'>
        <el-table align="center" :highlight-current-row="false" :data="curriculum" border style="width: 100%"
            :span-method="objectSpanMethod" :row-style="{'height':'100px'}">
            <el-table-column label="星期" align="center">
                <el-table-column label="课程" align="center">
                    <el-table-column label="课次" align="center" width="90">
                        <template slot-scope="scope">
                            <div v-if=" scope.$index ==4" >
                                午休
                            </div>
                            <div v-else-if="scope.$index ==9">
                                放学
                            </div>
                            <div v-else-if="scope.$index <4">
                                第 {{ scope.$index + 1 }} 节
                            </div>
                            <div v-else-if="scope.$index >8">
                                第 {{ scope.$index - 1 }} 节
                            </div>
                            <div v-else>
                                第 {{ scope.$index }} 节
                            </div>
                           
                        </template>
                    </el-table-column>
                </el-table-column>

            </el-table-column>
            <el-table-column align="center" prop="MON" label="星期一">
                <template scope="scope">
                    <div v-if="scope.row.MON">
                        <div>{{scope.row.MON.courseName}}</div>
                        <div>{{scope.row.MON.teacherName}}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.MON.weekNumber">
                            <span>周次:</span>
                            {{scope.row.MON.weekNumber}}
                        </div>

                    </div>

                </template>
            </el-table-column>
            <el-table-column align="center" prop="TUE" label="星期二">
                <template scope="scope">
                    <div  v-if="scope.row.TUE">
                        <div>{{scope.row.TUE.courseName}}</div>
                        <div>{{scope.row.TUE.teacherName}}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.TUE.weekNumber">
                            <span>周次:</span>
                            {{scope.row.TUE.weekNumber}}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="WED" label="星期三">
                <template scope="scope">
                    <div  v-if="scope.row.WED">
                        <div>{{scope.row.WED.courseName}}</div>
                        <div>{{scope.row.WED.teacherName}}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.WED.weekNumber">
                            <span>周次:</span>
                            {{scope.row.WED.weekNumber}}
                        </div>

                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="THU" label="星期四">
                <template scope="scope">
                    <div  v-if="scope.row.THU">
                        <div>{{scope.row.THU.courseName}}</div>
                        <div>{{scope.row.THU.teacherName}}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.THU.weekNumber">
                            <span>周次:</span>
                            {{scope.row.THU.weekNumber}}
                        </div>

                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="FRI" label="星期五">
                <template scope="scope">
                    <div  v-if="scope.row.FRI">
                        <div>{{scope.row.FRI.courseName}}</div>
                        <div>{{scope.row.FRI.teacherName}}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.FRI.weekNumber">
                            <span>周次:</span>
                            {{scope.row.FRI.weekNumber}}
                        </div>

                    </div>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="SAT" label="星期六">
                <template scope="scope">
                    <div  v-if="scope.row.SAT">
                        <div>{{scope.row.SAT.courseName}}</div>
                        <div>{{scope.row.SAT.teacherName}}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.SAT.weekNumber">
                            <span>周次:</span>
                            {{scope.row.SAT.weekNumber}}
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="SUN" label="星期日">
                <template scope="scope">
                    <div  v-if="scope.row.SUN">
                        <div>{{scope.row.SUN.courseName}}</div>
                        <div>{{scope.row.SUN.teacherName}}</div>
                        <div>{{ scope.row.MON.room }}</div>
                        <div v-if="scope.row.SUN.weekNumber">
                            <span>周次:</span>
                            {{scope.row.SUN.weekNumber}}
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { curriculumApi } from '@/api/course';
//MON 、星期二 TUE 、星期三 WED 、星期四 THU 、星期五 FRI 、星期六 SAT 、星期天 SUN。
export default {
    components: {},
    props: {},
    data() {
        return {
            curriculum: []
        };
    },
    watch: {},
    computed: {},
    methods: {
        init(){
            this.getData()
        },
        getData(){
            curriculumApi.getusercurriculum({}).then(({ data }) => {
            data.splice(8,0,{})
            data.splice(4,0,{})

            this.curriculum = data;
        })
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if(rowIndex==4 || rowIndex==9){
                return {
                        rowspan: 1, //合并数量
                        colspan: 8
                    }
            }
            return {
                rowspan: 1, //合并数量
                colspan: 1
            }




        },
        isSameCourse(target, compare, weekday, sum) {
            if ( this.curriculum[target][weekday] && this.curriculum[compare][weekday] && compare >= 0 ) {
                if (this.curriculum[target][weekday].courseName && this.curriculum[target][weekday].courseName == this.curriculum[compare][weekday].courseName) {

                    sum = this.isSameCourse(target, compare +1, weekday, sum + 1)

                }
            } 

            return sum;
        }
    },
    created() { 
        this.getData()
    },
    mounted() {

    }
};
</script>

<style lang="scss">
.nohover{
    .el-table th {
        overflow: initial;
    }
    .el-table thead {
        tr:first-of-type th:first-of-type,
        tr:nth-of-type(2) th:first-of-type {
            border-bottom: none;
        }
        tr:first-of-type th:first-of-type,
        thead tr:nth-of-type(2) th:first-of-type {
            border-bottom: none;
        }

        tr:first-of-type th:first-of-type .cell {
            text-align: right;
        }

        tr:nth-of-type(2) th:first-of-type .cell {
            padding-left: 0;
        }

        tr:last-of-type th:first-of-type .cell {
            text-align: left;
        }

        tr:first-of-type th:first-of-type:before,
        tr:last-of-type th:first-of-type:before {
            content: '';
            position: absolute;
            width: 1px;
            background-color: #666;
            display: block;
        }

        tr:first-of-type th:first-of-type:before {
            height: 198px; //根据情况调整
            top: 0;
            left: 38px; //根据情况调整
            transform: rotate(-20deg); //根据情况调整
            transform-origin: top;
            z-index: 2;
        }

        tr:last-of-type th:first-of-type:before {
            height: 198px; //根据情况调整
            bottom: 0;
            right: 0; //根据情况调整
            transform: rotate(-50deg); //根据情况调整
            transform-origin: bottom;

        }

    }
}



// .el-table__row:hover ,.hover-row>td{
//     background-color: unset !important;
// }

</style>

<style lang="scss" scoped>

</style>